import {useEffect, useRef, useState} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {Menu, Button} from 'antd';
import ProTable, {ActionType} from '@ant-design/pro-table';
import { PlusOutlined} from '@ant-design/icons';
import {getUserLable,getUserLabelLists} from "@/services/ant-design-pro/users";
import '../index.css';

const UserList = () => {
  const actionRef = useRef<ActionType>();
  const [key, setKey] = useState('1');
  const [addShow, setAddShow] = useState([]);
  const [search, setSearch] = useState([]);

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 80,
      search:false
    },
    {
      title: '标签名称',
      dataIndex: 'label_name',
      search:false
    },
    {
      title: '操作',
      width: 180,
      valueType: 'option',
      render: () => [
        <a key="link">修改</a>,
        <a key="link2" onClick={()=>{}}>删除</a>,
      ],
    },
  ];

  // 组件挂载完成
  useEffect(async ()=>{
    // 用户标签分类
    const userList = await getUserLabelLists()
    console.log(userList)
    setAddShow(userList)
  },[])


  return (
    <PageContainer>
      <ProTable
        columns={columns}
        rowKey="id"
        actionRef={actionRef}
        pagination={{
          showSizeChanger: true,
          pageSize: 10,
          current: 1,
        }}
        tableRender={(_, dom) => (
          <div
            style={{
              display: 'flex',
              width: '100%',
            }}
          >
            <Menu
              style={{ width: 256 }}
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['1']}
              mode="inline"
              onSelect={ ({ key })=>{
                if(key === 0){
                  setSearch({
                    label_category_id:undefined
                  })
                }else{
                  setSearch({
                    label_category_id:key
                  })
                }

                actionRef.current?.reload();
              } }
            >
              <Menu.ItemGroup>
                <Menu.Item key={0}>全部</Menu.Item>
                {
                  addShow.map((item)=>{
                    return <Menu.Item key={item.id}>{item.nickname}</Menu.Item>
                  })
                }

              </Menu.ItemGroup>
            </Menu>
            <div
              style={{
                flex: 1,
              }}
            >
              {dom}
            </div>
          </div>
        )}
        params={{
          key,
        }}
        request={async (params) => {
          const {data,meta} = await getUserLable({...params,...search})
          return {
            data,
            success:true,
            total:meta.pagination.total
          }
        }}
        search={{
          optionRender: false,
          collapsed: false,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary" onClick={()=>{}}>
            添加标签
          </Button>,
          <Button key="button" icon={<PlusOutlined />} onClick={()=>{}}>
            添加分类
          </Button>,
        ]}
      />

    </PageContainer>
  );
};

export default UserList;
